<template>
  <div>
    <!-- :value 动态设置 value 属性 -->
    <!-- 数据变化会影响视图,单项的 -->
    <!-- v-model 双向数据绑定 -->
    <!-- 语法:v-model="变量" -->
    <!-- v-model 绑定的其实是input 的value 属性 -->
    用户名: <input v-model="src" type="text" />
    <hr />
    <!-- 
    为什么 vue 要设计双向绑定呢?
    假设没有双向绑定,用户输入完用户名密码后,点击登录
    获取用户输入的用户名和密码,此时需要获取dom元素
    dom 对象.value 才能获取到用户名和密码
    现在有了双向绑定后,只需要将表单元素和变量进行绑定
    用户点击登录是,直接取变量的值就可以获取到用户名密码了
    -->
    <!-- 文本域 用法跟input 一样 -->
    <textarea v-model="username"></textarea>
    <hr />
    <!-- select下拉框 绑定的是option的value值 -->
    <select v-model="from">
      <option value="wh">武汉</option>
      <option value="sh">上海</option>
      <option value="bj">北京</option>
    </select>
    <hr>
    <!-- 在checkbox 上使用时,分两种情况
    1.绑定的数据是数组类型,将value 属性的值加到数组中
    2.绑定的数据是非数组类型(其他类型全部都会隐式转换成布尔类型值),将checked 设置给变量isAll -->
    兴趣爱好:
    <input v-model="hobby" type="checkbox" value="smoking">抽烟
    <input v-model="hobby" type="checkbox" value="drink">喝酒
    <input v-model="hobby" type="checkbox" value="hothead">烫头
    <hr>
    <input v-model="isAll" type="checkbox">全选
  </div>
  <!-- 总结:在checkbox 上使用 v-model 是 分两种情况:
  1.绑定的数据是数组类型是,绑定的就是value属性
  2.绑定的数据是非数组类型是,其实就是布尔值,绑定的就是checked 属性 -->
</template>

<script>
export default {
  data() {
    return {
      src: "",
      username: "",
      from: "",
      hobby:[],
      isAll:''
    };
  },
};
</script>

<style>
</style>